<template xlang="wxml">
	<view>
		<view class="qrCode-us">
			<view class="qrCode-info">
				<view class="us-info">
					<view class="face">
						<image :src="userinfo.userIcon"></image>
					</view>
					<view class="info">
						<view class="username"><input v-model="userinfo.realName" type="text" disabled="true" /></view>
						<view class="usernike"><input v-model="userinfo.userAccount" type="text" disabled="true" /></view>
					</view>
				</view>
				<view class="qrimg" @longtap="saveQrcode">
					<tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground"
					 :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake"
					 :usingComponents="true" @result="qrR" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		data() {
			return {
				userinfo: {},
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			let pages = getCurrentPages();
			this.userinfo = pages[0].$vm.userinfo;
			this.val = this.userinfo.userAccount + '_' + this.userinfo.mobilePhone
			// #ifndef APP-PLUS
			uni.getImageInfo({
				src: this.userinfo.userIcon,
				success: res => {
					this.icon = res.path;
				}
			});
			// #endif
			// #ifdef APP-PLUS
			this.icon = this.userinfo.userIcon;
			// #endif
		},
		mounted() {
			this.$refs.qrcode._makeCode();
		},
		methods: {
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.src = res;
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
		},
		components: {
			tkiQrcode
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #E6E9F0
	}

	.qrCode-us {
		&.status {
			padding-top: let(--status-bar-height);
		}

		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;

		.qrCode-info {
			width: 85%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			align-items: center;
			justify-content: center;
			padding: 3% 0 15% 0;

			.us-info {
				display: flex;
				flex-direction: row;
				margin: 20upx;

				.face {
					flex-shrink: 0;
					width: 15vw;
					height: 15vw;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10%
					}
				}

				.info {
					display: flex;
					flex-flow: wrap;
					margin-left: 23upx;

					.username {
						width: 100%;
						font-size: 36upx
					}

					.usernike {
						display: flex;
						align-items: center;
						height: 40upx;
						color: #9A9A9A;
						border-radius: 20upx;
					}
				}
			}

			.qrimg {
				display: flex;
				justify-content: center;
				margin-top: 52upx;
			}
		}
	}
</style>
